<template>

  <div class="Detail">

  <detailNavBar @titleClick="titleClick" ref="detailNavBar"/>
    <scroll class="content" ref="scroll"  :probeType="3" @scroll="contentScroll">
      <detailSwiper :topImages="topImages"/>
      <detailBaseInfo :baseInfoGoods="baseInfoGoods"/>
      <detailshopInfo :shop="shop"/>
      <detailGoodsInfo :detailInfo="detailInfo" @imgLoad="imgLoad"/>
      <detailParamsInfo
      ref="params"
      :itemParams="itemParams"
      DetailParamsInfoImgLoad="DetailParamsInfoImgLoad"/>
      <detailComment
       ref="comment"
       :commentInfo="commentInfo"/>
      <detailRecommends
        ref="recommends"
      :goods="goods"/>
      <goodsList :goods="goods" />
    </scroll>
    <detailBottomBar @addToCart="addToCart"/>
  </div>
  </div>

</template>

<script>
import Scroll from '@/components/common/scroll/Scroll'
 import DetailNavBar from './childcomps/DetailNavBar'
 import DetailSwiper from './childcomps/DetailSwiper'
 import DetailBaseInfo from './childcomps/DetailBaseInfo'
 import DetailshopInfo from './childcomps/DetailshopInfo'
 import DetailGoodsInfo from './childcomps/DetailGoodsInfo'
import DetailParamsInfo from './childcomps/DetailParamsInfo'
import DetailComment from './childcomps/DetailComment'
import DetailRecommends from './childcomps/DetailRecommends'
import GoodsList from '@/components/content/goods/GoodsList'
import DetailBottomBar from './childcomps/DetailBottomBar'

import {getDetail,Goods, Shop,getRecommend}  from '@/network/detail'



  export default {
    name:'Detail',
    components:{
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailshopInfo,
      Scroll,
      DetailGoodsInfo,
      DetailParamsInfo,
      DetailComment,
      DetailRecommends,
      GoodsList,
      DetailBottomBar,

    },
    data() {
      return {
        iid:null,
        topImages:[],
        baseInfoGoods:{},
        shop:{},
      detailInfo:{},
      itemParams:{},
      commentInfo:[],
       goods:[],
       topNavBarYs:[],
      }
    },
   created(){
    // 一.保存传入的iid
       this.iid = this.$route.params.iid
    //  二.根据传入的iid请求详情数据
       getDetail(this.iid).then(res=>{
          // console.log(res);
          // 3.顶部轮播数据
          this.topImages=res.result.itemInfo.topImages
          // 4.商品数据
         this.baseInfoGoods = new Goods(res.result.itemInfo,res.result.columns,res.result.shopInfo.services)
            // 5.店铺数据
            // console.log(res.result.shopInfo);
            this.shop = new Shop(res.result.shopInfo)
            // 6.获取商品详细数据
            this.detailInfo = res.result.detailInfo
            // 7.取出参数信息
            this.itemParams = res.result.itemParams
            // 8.取出评论信息
            if( res.result.rate.cRate!==0)
            this.commentInfo =  res.result.rate.list
            // 获取推荐数据
          })
          //  三.请求详情里的推荐数据
          getRecommend(this.iid).then(res=>{
            console.log(res);
            this.goods=res.data.list

          })

   },


mounted(){
this.$bus.$on('itemImgLoad',()=>{
  //  拿到scroll中刷新方法refresh(),当每一张图片加载完成就执行refresh()函数
  // this.$refs.scroll.refresh() 但是这样执行过于频繁不好，利用抖动/节流函数来刷新
      this.$refs.scroll.refresh()
    })

},


methods:{

 imgLoad(){
  //  当图片加载完成再获取位置

      this.$refs.scroll.refresh()
      this.topNavBarYs=[]
      this.topNavBarYs.push(0)
      this.topNavBarYs.push(this.$refs.params.$el.offsetTop)
      this.topNavBarYs.push(this.$refs.comment.$el.offsetTop)
      this.topNavBarYs.push(this.$refs.recommends.$el.offsetTop)
 },


 DetailParamsInfoImgLoad(){
  this.$refs.scroll.refresh()
 },


titleClick(index){
  this.$refs.scroll.scrollTo(0,-this.topNavBarYs[index],0)
},


contentScroll(position){

  // for(  let i=0;i<this.topNavBarYs.length-1;i++)
  //  {
  //    if(this.currentIndex!==i&&((-position.y)>=this.topNavBarYs[i]&&(-position.y)<this.topNavBarYs[i+1])){
  //           this.currentIndex=i
  //         this.$refs.detailNavBar.currentIndex=this.currentIndex
  //    }
  // }

        if((-position.y)>=this.topNavBarYs[4])
          this.$refs.detailNavBar.currentIndex=4
        else if((-position.y)>=this.topNavBarYs[3])
         this.$refs.detailNavBar.currentIndex=3
        else if((-position.y)>=this.topNavBarYs[2])
         this.$refs.detailNavBar.currentIndex=2
           else if((-position.y)>=this.topNavBarYs[1])
           this.$refs.detailNavBar.currentIndex=1
           else
            this.$refs.detailNavBar.currentIndex=0
},

addToCart(){
    let  product={}
    // 获取购物车展示的信息，放到对象里面放到vuex
    product.img=this.topImages[0]
    product.title=this.baseInfoGoods.title
    product.desc=this.baseInfoGoods.desc
    product.realPrice=this.baseInfoGoods.realPrice
    product.iid=this.iid

      this.$store.commit('addCart',product)

    }

}


  }
</script>

<style scoped>
 .Detail{
 position: relative;
 height: 100vh;
  z-index: 12;
  background-color: #fff;

 }
 .content{
 position: absolute;
 top: 44px;
 bottom: 49px;
 left: 0px;
 right: 0px;
 }
 .body{
background-color: #fff;
 }
 /* .bj{

background-color: #fff;
 } */

</style>
